<template>
  <div
    ref="list"
    class="list"
    :style="{
      transition: '.2s',
      transform: `translateY(${show ? 0 : disY}px)`,
    }"
  >
    <dl>
      <dt>播放列表</dt>
      <dd
        v-for="(item, index) in musicList"
        :key="index"
        :class="{ active: curIndex === index }"
        @touchend="selectItemMusic(item.id, index)"
      >
        {{ item.name }}
      </dd>
    </dl>
    <div class="close" @touchend="slideDown()">关闭</div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  props: {
    show: {
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      curIndex: 0, //默认让第1首歌是一个选中的状态
      durTime: 0, //存储总时长
      frameId: null, //定时器
      startTime: 0, //开始播放的时间
      lastPercent: 0, //暂停时已经走的百分比
      disY: 30,
    };
  },
  mounted() {
    this.disY = this.$refs.list.offsetHeight;
  },
  computed: {
    ...mapState({
      songId: (state) => state.songId,
      songIds: (state) => state.songIds,
      musicList: (state) => state.musicList,
    }),
  },
  methods: {
    ...mapMutations(["storageSongId"]),
    changeSelect(index) {
      //切换选中元素
      this.curIndex = index;
    },
    slideUp() {
      //列表滑动显示
      this.$refs.list.style.transition = ".2s";
      this.$refs.list.style.transform = "translateY(0)";
    },
    slideDown() {
      //列表滑动隐藏
      this.$refs.list.style.transition = ".2s";
      this.$refs.list.style.transform = "translateY(" + this.disY + "px)";
      this.$emit("closeListControl", false);
    },
    selectItemMusic(id, index) {
      if (this.songId === id) {
        return;
      }
      this.$player.music.status = "play"; //歌曲要变成播放状态
      this.storageSongId(id); //索引值对象身上的当前索引值要更新
      this.$emit("loadMusic", index);
      this.slideDown(); //列表消失
    },
  },
};
</script>

<style lang="less" scoped>
.his-item {
  padding: 15px;
  background: #eee;
  border-radius: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
</style>
